<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix AutoCompleteInput</title>

    <link rel="stylesheet" href="demos.css" />
    <script type="module" src="../define/AutoCompleteInput.js"></script>
  </head>

  <body role="main">
    <div class="demo padded">
      Pet:
      <elix-auto-complete-input
        id="sampleAutoCompleteInput"
        aria-label="Pet"
      ></elix-auto-complete-input>
      <script>
        sampleAutoCompleteInput.texts = [
          "Canary",
          "Cat",
          "Chicken",
          "Chinchilla",
          "Cockatiel",
          "Cricket",
          "Dog",
          "Ferret",
          "Finch",
          "Fish",
          "Frog",
          "Gerbil",
          "Guinea Pig",
          "Hamster",
          "Hermit Crab",
          "Lizard",
          "Mouse",
          "Parakeet",
          "Parrot",
          "Pig",
          "Rabbit",
          "Rat",
          "Snail",
          "Snake",
          "Spider",
          "Turtle"
        ];
      </script>
    </div>
  </body>
</html>
